<!--  -->
<template>
  <div class="homeon">
      <h1 class="title">首页</h1>
       <el-row :gutter="30">
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="1">
          <div class="grid-content bg-purple content_item1">
            <span class="count">{{userCount}}</span>
            <span class="introduce">
              <i class="el-icon-user"></i> 用户总数
            </span>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="1">
          <div class="grid-content bg-purple content_item2">
            <span class="count">{{productCount}}</span>
            <span class="introduce">
              <i class="el-icon-goods"></i> 商品总数
            </span>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="1">
          <div class="grid-content bg-purple content_item3">
            <span class="count">{{orderCount}}</span>
            <span class="introduce">
              <i class="el-icon-edit"></i> 订单总数
            </span>
          </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import { homeon } from "@/request/http";
export default {
    name:"HomeOn",
     data() {
      return {
          userCount: '',
          productCount: '',
          orderCount: '',
          homeonlist:{}
      };
      
    },
    mounted(){
      homeon().then(res=>{
         this.homeonlist=res.data.data

         const { userCount, productCount, orderCount } = res.data.data;

          this.userCount = userCount;
          this.productCount = productCount;
          this.orderCount = orderCount;
      })
    }
}

</script>
<style lang="scss" scoped>
@import "@/Scss/index.scss";
.introduce {
  color: #fff;
}
.count {
  line-height: 65px;
  font-weight: 500;
  @include Font(40px, #fff);
}
.content_item1 {
  background:yellow;
}
.content_item2 {
  background: lightgreen;
}
.content_item3 {
  background: lightblue;
}

.bg-purple:hover {
  transform: scale(1.08);
  transition: all 0.5s;
}
.bg-purple:hover span {
  color: #333;
}
.home_content {
  width: 95%;
  margin: 0 auto;
}

.title {
  display: inline-block;
  font-weight: normal;
}
.bg-purple {
  text-align: center;
  @include FlexMenu();
  min-height: 160px;
}
</style>